<template>
	<view class="container">
		<view class="homeBg">
			<view class="title">行情</view>
			<!-- <image src="../../static/home/search.png" mode="widthFix" class="searchIcon"></image> -->
		</view>
<!-- 		<view class="searchBox">
			<u-search placeholder="请输入积分名称" v-model="billName" @search="searchFn" @custom="searchFn"></u-search>
		</view> -->
		<view class="goods_list">
			<view class="listCentent" v-if="defaultList.length>0 || tabBoxList.length > 0">
				<scroll-view scroll-x class="scrollBox">
					<view class="header">
						<view class="name-label label">名称/代码</view>
						<view class="label">最新</view>
						<view class="label">涨跌</view>
						<view class="label">幅度</view>
						<view class="label">开盘</view>
						<view class="label">收盘</view>
						<view class="label">最高</view>
						<view class="label">最低</view>
					</view>
					<!--item.coinCode,item.billCode-->
					<view class="list-item" v-for="(item,index) in defaultList" :key="item.billCode"
						@tap="goDetail(item,item.isShow)">
						<view class="name-label">
							<view class="">{{item.billName}}</view>
							<view class="billCode">（{{item.billCode}}）</view>
						</view>
					
						<view class="right-label label-color2">
							<view class="label">{{item.currentExchangPrice||'0.00'}}</view>
							<view class="label">{{item.RiseAndFall||'0.00'}}%</view>
							<view class="label">{{Number(item.currentExchangPrice)?Number(item.currentExchangPrice - item.yesterdayPrice).toFixed(2):"0.00"}}
							</view>
							<view class="label">{{item.openPrice||'0.00'}}</view>
							<view class="label">{{item.yesterdayPrice||'0.00'}}</view>
							<view class="label">{{item.maxPrice||'0.00'}}</view>
							<view class="label">{{item.minPrice||'0.00'}}</view>
						</view>
					</view>
					
					<block v-if="tabBoxList.length>0">
						<view class="list-item" v-for="(item,index) in tabBoxList" :key="index"
							@tap="goDetail(item,true)">
							<view class="name-label">
								<view class="">{{item.billName}}</view>
								<view class="billCode">（{{item.billCode}}）</view>
							</view>
							<!-- label-color1 -->
							<view class="right-label label-color2">
								<view class="label">{{item.currentExchangPrice||'0.00'}}</view>
								<view class="label">{{item.RiseAndFall||'0.00'}}%</view>
								<view class="label">{{Number(item.currentExchangPrice - item.yesterdayPrice).toFixed(2)}}
								</view>
								<view class="label">{{item.openPrice||'0.00'}}</view>
								<view class="label">{{item.yesterdayPrice||'0.00'}}</view>
								<view class="label">{{item.maxPrice||'0.00'}}</view>
								<view class="label">{{item.minPrice||'0.00'}}</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="msg" v-if="isEnd && (defaultList.length>0 || tabBoxList.length > 0 )">
				<image src="../../static/home/line.png" mode="widthFix" class="left-line"></image>
				<text class="text">没有更多内容啦</text>
				<image src="../../static/home/line.png" mode="widthFix" class="right-line"></image>
			</view>
			<view v-show="defaultList.length == 0 && tabBoxList.length == 0" class="noListBox">
				<view class="noData">
					<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view>
			</view>
		</view>

		<view class="popupBox" v-if="!hasLogin && isPopupShow">
			<view v-if="!hasLogin">
				<text>请先前往登录吧！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去登录</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
			<view v-if="hasLogin && uerInfo.isRealName != 1">
				<text>实名认证后才可以购买哦！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去认证</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		PATH_IMG,
		BASE_API,
		WEBSOCKET_API
	} from '@/common/config.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		klinevtwoIndex,
		klinevtwoTradingview
	} from '@/api/home.js';
	export default {
		data() {
			return {
				isScrollY: false,
				tabBoxList: [],
				defaultList: [
				{
					billName: '匠想一号',
					billCode: '221914',
					coinCode: '221914',
					currentExchangPrice: '1285.00',
					yesterdayPrice: '1285.00',
					isShow: true
				}
				],
				billName: "",
				isEnd: true,
				page: 1,
				socketTask: null,
				is_open_socket: false,
				coinCode: ""
			}
		},
		onShow() {
			if (!this.hasLogin) {
				uni.reLaunch({
					url: "/pages/login/login"
				});
			}
			this.getList();
		},
		computed: {
			...mapState(["hasLogin", "uerInfo", "h5Data"])
		},
		methods: {
			searchFn() {
				this.tabBoxList = [];
				this.getList()
			},
			goDetail(item, isShow) {
				if (isShow) {
					if (item.coinCode) {
							// A票
							uni.navigateTo({
								url: '/pages/transaction/statistics?coinCode=' + item.coinCode + '&billCode=' + item.billCode
							})
					} else {
						this.$u.toast("暂未开启转让")
					}
				} else {
					this.$u.toast("暂未开启交易")
				}
				// this.$u.toast("暂未开启转让")


			},
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】(客户端)
			connectSocketInit(data) {
				// this.$refs.min_loading.open('加载中，请稍后！');
				// is_open_socket,init,cmd,coinCode,interval
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					// url: "ws://192.168.63.105:8111/deep", // 你的socket地址
					url: WEBSOCKET_API + "/deep/deep",
					success(res) {
						console.log("websocket连接成功", res);
					},
				});
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					// 初始化数据
					this.sendMessage();
					//
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						let data = JSON.parse(res.data).area[0].data;
						this.tabBoxList = data.map(item => {
							item.billCode = item.coinCode.split('_')[0];
							item.currentExchangPrice = Number(item.currentExchangPrice).toFixed(2);
							if(item.currentExchangPrice<=0){
								item.currentExchangPrice = item.yesterdayPrice;
							}
							item.openPrice = Number(item.openPrice).toFixed(2)
							item.yesterdayPrice = Number(item.yesterdayPrice).toFixed(2)
							item.maxPrice = Number(item.maxPrice).toFixed(2)
							item.minPrice = Number(item.minPrice).toFixed(2)
							return item
						})
						console.log(this.tabBoxList);
						// this.$refs.min_loading.close();
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了");
					// this.$refs.min_loading.close();
				})
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket(state, is_open_socket) {
				const _this = this
				this.socketTask.close({
					success(res) {
						// console.log("关闭成功", res)
						_this.is_open_socket = false
					},
					fail(err) {
						// console.log("关闭失败", err)
					}
				})
			},
			// 发送消息
			sendMessage() {
				this.socketTask.send({
					data: JSON.stringify({
						"cmd": "trading",
						"coinCode": this.coinCode,
						"type": '0',
						"timeout": 1440
					}),
					async success() {
						console.log("消息发送成功");
					},
				});
			},
			getList() {
				// this.$refs.min_loading.open('加载中，请稍后！');
				klinevtwoTradingview({
					langCode: "zh_CN"
				}).then(res => {
					console.log(res, '000');
					
					if (res.data.defaultCoin) {
						this.coinCode = res.data.defaultCoin;
						this.connectSocketInit();

					} else {
						return;
					}
				})
			}
		},
		// onPullDownRefresh() {//下拉刷新
		// 	this.page = 1;
		// 	// this.isEnd = false;
		// 	this.getList();
		// },
		onHide() {
			console.log('页面卸载了')
			this.closeSocket();
		},
		onUnload() {
			this.closeSocket();
			clearInterval(this.timer);
		}
	}
</script>
<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		// content-visibility: auto;
		// contain-intrinsic-size: 1px 5000px;
	}

	.container {
		width: 100%;
		height: 100%;
		padding-top: 150upx;

		.homeBg {
			width: 100%;
			height: 120upx;
			background: url(../../static/login/bg.png) no-repeat top center;
			background-size: 100% 500%;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.searchIcon {
				width: 44upx;
				position: absolute;
				right: 42upx;
				// bottom: 50upx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.popupBox {
			width: 100%;
			height: 84upx;
			position: fixed;
			bottom: 118upx;
			left: 0;
			padding: 0 40upx;
			z-index: 99;

			>view {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FCCC35;
				border-radius: 10upx;
				font-size: 24upx;
				padding: 0 30upx;
				color: #151515;

				.btns {
					display: flex;
					align-items: center;
					font-size: 0;

					.navigator {
						width: 130upx;
						height: 55upx;
						background: #191919;
						border-radius: 28upx;
						font-size: 24upx;
						font-weight: 400;
						color: #FCCC35;
						line-height: 55upx;
						text-align: center;
						margin-right: 10upx;
					}
				}
			}
		}

		.searchBox {
			width: 100%;
			padding: 20upx 30upx;
			position: fixed;
			top: 120upx;
			left: 0;
			background-color: #FFFFFF;
		}

		.goods_list {
			width: 100%;
			padding-bottom: 120upx;
			// padding-top: 48upx;
			// height: calc(100% - 30upx);

			.header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				padding: 0 30upx;
				text-align: center;
				// position: fixed;
				// top: 120upx;
				// left: 0;
				background-color: #FFFFFF;
				padding: 10upx 0 10upx 30upx;

				.label {
					flex: 1;
					min-width: 150upx;
				}

				.name-label {
					// flex: 2;
					width: 276upx !important;
					min-width: 276upx;
					color: #666666;
				}
			}

			.listCentent {
				width: 100%;

				.scrollBox {
					width: 100%;
					overflow-x: scroll;
				}

				.list-item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: nowrap;
					text-align: center;
					padding: 26upx 30upx;
					font-size: 30upx;
					font-weight: 400;
					box-shadow: 0px 1upx 0px 0px rgba(221, 221, 221, 1);
					// border-bottom: 1upx solid rgb(221, 221, 221);

					.right-label {
						display: flex;
						align-items: center;
						justify-content: center;

						.label {
							min-width: 150upx;
							text-align: center;
						}
					}

					.name-label {
						width: 276upx !important;
						min-width: 276upx;
						color: #3A3A3A;

						.billCode {
							font-size: 26upx;
							color: #666566;
						}
					}

					.label-color1 {
						color: #119214;
					}

					.label-color2 {
						color: #000;
					}

					.label-color3 {
						color: #C20707;
					}
				}

			}

		}

		.msg {
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #BCBCBC;
			margin-top: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				margin: 0 20upx;
			}

			.left-line {
				width: 100upx;
			}

			.right-line {
				width: 100upx;
				transform: rotate(-180deg);
			}

			// padding-bottom: 100upx;
		}

		.noListBox {
			text-align: center;

			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 500upx;

				.noDataImg {
					width: 316upx;
					height: 126upx;
				}

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}
	}
</style>
